<!-- 视图周界线 -->

<template>
  <div :class="lineClass">
    <svg>
      <line v-bind="lineProps" />
      <line
        v-bind="lineProps"
        :stroke-width="wideWidth"
        @mouseenter="mouseEnter"
        @mouseleave="mouseLeave"
        @click.stop="toShow"
      />
    </svg>

    <div
      v-show="false"
      class="Secure-MapView-line-panel"
      :style="textStyle"
      @mouseenter="mouseEnter"
      @mouseleave="mouseLeave"
    >
      <div>{{ obj.deviceName }}</div>
      <div>{{ obj.areaName }}</div>
      <div v-if="obj.ipAddress">{{ obj.ipAddress }}</div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ViewPoint from '../ViewPoint'

// ============================== 导出组件 ============================== //

export default CORE.extend(ViewPoint, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ViewLine',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父组件视图
     */
    parentView: ViewPoint.computed.parentView,

    /**
     * 周界样式类
     */
    lineClass() {
      const { map_one, obj: { id, deviceId, site: { x1, y1 } }, hide, $parent: { readyImg } } = this
      const name = 'Secure-MapView-line'
      const hideStr = hide || !readyImg || !x1 || !y1 ? ` ${name}-hide` : ''
      const marking = map_one.id === id ? ` ${name}-marking` : ''
      const hoverStr = this.map_MAP.hoverId === deviceId ? ` ${name}-hover` : ''
      return `${name}${hideStr}${marking}${hoverStr} noMove`
    },

    /**
     * 文本样式对象
     */
    textStyle() {
      const { obj: { site: { x1, y1, x2, y2 } }, parentView: { scale = 1, rotate = 0 } } = this
      if (!x1 || !y1 || !x2 || !y2) return null

      const transform = `translate(-50%, -50%) scale(${1 / scale}) rotate(${-rotate}deg)`
      const x = (+(x1 || '').slice(0, -1) + +(x2 || '').slice(0, -1)) / 2
      const y = (+(y1 || '').slice(0, -1) + +(y2 || '').slice(0, -1)) / 2
      return { top: `${y}%`, left: `${x}%`, transform }
    },

    /**
     * 周界线属性
     */
    lineProps() {
      const { obj: { id, objectRunStatus, site }, parentView: { scale = 1 } } = this

      return {
        id,
        x1: site.x1,
        y1: site.y1,
        x2: site.x2,
        y2: site.y2,
        stroke: CORE.dict(CORE.DICT.STATUS_MAP_DEVICE, objectRunStatus, 2),
        'stroke-width': 10 / scale | 0,
      }
    },

    /**
     * 宽线的宽度
     */
    wideWidth() {
      return this.lineProps['stroke-width'] * 1.4
    },
  },
})
</script>
